<template>
  <div class="chat">
    <a-scrollbar style="height:600px;overflow: auto;padding-right: 10px;">
      <div v-for="(item, index) in chatArr" :key="index" class="chatarr">
        <div v-if="item.status === '0'" class="reply0">
          <div class="avatar"><img width="40" src="../../../../assets/images/aigc.png" alt=""></div>
          <div class="content">{{ item.content }}</div>
        </div>
        <div v-if="item.status === '1'" class="reply1">
          <div class="avatar"><img width="40" src="../../../../assets/images/user.webp" alt=""></div>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>      
    </a-scrollbar>
  </div>
</template>

<script lang="ts" setup>
// import Markdown from 'vue3-markdown-it';
import 'highlight.js/styles/a11y-dark.css';
import { reactive } from 'vue'

let chatArr = reactive([
      {
        status: '0', // 0-回复，1-问题
        content: "您好，我是你的机器助手，有什么可以帮助到您的吗111111"
        +"```javascript"
        +"\n"
        + " var a = 10"
        +"\n"
        + "```\n"
        +"#hello"
      }, {
        status: '1',
        content: "我要开始提问啦！"
      }, {
        status: '0',
        content: "请问您想要问什么呢？\n"+
        "```javascript"
        +"\n"
        +"const b=5"
        +"\n"
        +"```"
      },{
        status: '1',
        content: "我要开始提问啦！"
      },{
        status: '1',
        content: "我要开始提问啦！"
      },{
        status: '1',
        content: "我要开始提问啦！"
      },{
        status: '1',
        content: "我要开始提问啦！"
      },{
        status: '1',
        content: "我要开始提问啦！"
      },{
        status: '1',
        content: "我要开始提问啦！"
      },{
        status: '1',
        content: "我要开始提问啦！"
      },{
        status: '1',
        content: "我要开始提问啦！"
      },{
        status: '1',
        content: "我要开始提问啦！"
      },{
        status: '1',
        content: "我要开始提问啦！"
      }
    ]);

</script>

<style lang="less">
.chat {
    height: 100%;
    // background-color: linear-gradient(180deg, #f5f4f6, #e6ebf7);
}
.chatarr {
  background-color: #000;
  width: 60%;
}

// 回复的样式
.reply0{
  display: flex;
  width: 100%;
  margin-top: 5px;
  align-items: center;

  .content {
    margin-left: 10px;
    padding: 15px;
    max-width: 500px;
    border: 1px solid #000;
    border-radius: 8px;
    color: #000;
    background-color: #fff;
    word-wrap: break-word;
  }
}
.reply1{
  display: flex;
  max-width: 100%;
  margin-top: 5px;
  align-items: center;

  .content {
    margin-left: 10px;
    padding: 15px;
    max-width: 500px;
    border: none;
    color: #000;
    word-wrap: break-word;
  }
}
.left {
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-right-color: rgba(222, 222, 244);
}


// 提问的样式
.question {
  display: flex;
  margin-top: 5px;
  // background: greenyellow;
  justify-content: right;

  .content {
    padding: 15px;
    max-width: 500px;
    border: 1px solid;
    color: #676490;
  }

  .left {
    width: 0px;
    height: 0px;
    border: 15px solid transparent;
    border-left-color: rgba(222, 222, 244);
  }
}

</style>